<template>
    <div class="grid_8">
        <div class="display-box">
        <div><span class="color-white">justify-content:</span>
            <el-select v-model="justifyContent" placeholder="请选择">
            <el-option
                v-for="item in justifyContentList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
        </div>
        <div>
            <span class="color-white">justify-items:</span>
            <el-select v-model="justifyItem" placeholder="请选择">
            <el-option
                v-for="item in justifyItemList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
        </div>
        </div>
        <div class="display-box">
        <div class="code">
            <div class="origin">.parent {</div>
            <div class="color2">display: grid;</div>
            <div class="color2">grid-template-columns: 100px 100px;</div>
            <div class="color2">justify-content: <span class="color-purple">{{justifyContent}}</span>;</div>
            <div class="color2">justify-items: <span class="color-purple">{{justifyItem}}</span>;</div>
            <div class="origin">}</div>
        </div>
        <div class="parent" :style="{justifyContent: justifyContent,justifyItems:justifyItem}">
            <div class="child child2">One</div>
            <div class="child child2">Two</div>
            <div class="child">Three</div>
            <div class="child">Four</div>
            <div class="parent-hide-box" :style="{justifyContent: justifyContent}">
            <div class="bg bg1"></div>
            <div class="bg bg2"></div>
            </div>
        </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const justifyContent = ref('start(deafult)')
const justifyItem = ref('stretch(deafult)')

const justifyContentList = [
    {label:'start(deafult)',value:'start'},
    {label:'center',value:'center'},
    {label:'end',value:'end'},
    {label:'space-between',value:'space-between'},
    {label:'space-around',value:'space-around'},
    {label:'space-evenly',value:'space-evenly'},
]
const justifyItemList = [
    {label:'stretch(deafult)',value:'stretch'},
    {label:'start',value:'start'},
    {label:'center',value:'center'},
    {label:'end',value:'end'},
]
    
</script>
<style scoped lang='scss'>
.grid_8 {
    &>* {
        box-sizing: border-box;
    }
    .display-box{
        display: flex;
        gap: 30px;
        margin-top: 30px;
    }
    .code{
        background-color: #151F28;
        padding: 20px;
        border-radius: 6px;
        box-sizing: border-box;
        flex: 1;
    }
    .origin {
    color: #F8C265;
    line-height: 30px;
    }
    .color2{
    color: #A3FFEA;
    text-indent: 2em;
    line-height: 30px;
    }

    .parent {
    position: relative;
    padding: 1px 10px 4px 10px;
    border: 1px solid hsl(210deg 10% 40%);
    border-radius: 8px;
    width: 400px;
    gap: 10px;
    display: grid;
    grid-template-columns: 100px 100px;
    margin-top: 100px;
    }
    .parent-hide-box{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    gap: 10px;
    display: grid;
    padding: 2px 10px;
    grid-template-columns: 100px 100px;
    }
    .parent-hide-box .bg{
    border: 2px dashed #75808a;
    border-radius: 4px;
    height: calc(100% + 20px);
    width: 104px;
    margin-top: -20px;
    margin-left: -2px;
    }
    .child {
    line-height: 100px;
    text-align: center;
    border:2px solid hsl(210deg 8% 50%);
    border-radius: 3px;
    background: hsl(210deg 15% 20%);
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 16px;
    }
    .color-white{
    color: #fff;
    }
    .text-align-center{
    text-align: center;
    }
    .color-purple{
    color: #B88CF2FF;
    }
}
</style>